<template>
	<el-container>
		<el-header>
			<div class="header-left">
				<div class="logo">
					<img src="../assets/logo.png" />
				</div>
				<div class="title">后台管理系统</div>
			</div>
			<el-dropdown trigger="click" @command="handleCommand" style="margin-right: 3px;">
				<span class="el-dropdown-link"> {{ nickname }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item icon="el-icon-user" command="profile">个人资料</el-dropdown-item>
					<el-dropdown-item icon="el-icon-postcard" command="repass">修改密码</el-dropdown-item>
					<el-dropdown-item icon="el-icon-refresh" command="clear">清理缓存</el-dropdown-item>
					<el-dropdown-item icon="el-icon-switch-button" command="logout">退出登陆</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</el-header>
		<el-container style="height: calc(100vh - 64px);">
			<el-aside style="width: 160px;">
				<el-menu router="" :default-active="menus[0].sub[0].url" :default-openeds="'['+ menus[0].url +']'" active-text-color="#1686EF" style="margin-top: 10px;width: 160px;">
					<el-submenu :index="item.url" v-for="(item, index) in menus" v-bind:key="item.id">
						<template slot="title">{{ item.title }}</template>
						<el-menu-item :index="sub.url" v-for="(sub, idx) in item.sub" v-bind:key="sub.id">{{ sub.title }}</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>

			<el-main class="main-area">
				<router-view />
			</el-main>
		</el-container>
		<el-dialog title="个人资料" :visible.sync="profileDialogVisible" width="30%">
			<div class="item">
				<div class="title">账号</div>
				<div class="value">{{ profile.username }}</div>
			</div>
			<div class="item">
				<div class="title">昵称</div>
				<div class="value">{{ profile.nickname }}</div>
			</div>
			<div class="item">
				<div class="title">权限组</div>
				<div class="value">{{ profile.group.name }}</div>
			</div>
			<div class="item">
				<div class="title">创建时间</div>
				<div class="value">{{ profile.create_time }}</div>
			</div>
			<div class="item">
				<div class="title">上次登陆时间</div>
				<div class="value">{{ profile.login_at }}</div>
			</div>
			<div class="item">
				<div class="title">上次登陆IP</div>
				<div class="value">{{ profile.login_at }}</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="profileDialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</el-container>
</template>

<script>
import { Loading } from "element-ui";
export default {
	data() {
		return {
			nickname: "",
			menus: [],
			profileDialogVisible: false,
			profile: {
				group: {},
			},
		};
	},
	async created() {
		this.nickname = sessionStorage.getItem("nickname");
		let res = await this.$http.get("user/menu");
		if (res) this.menus = res;
	},
	methods: {
		async handleCommand(cmd) {
			switch (cmd) {
				case "logout":
					await this.$confirm(`确认退出当前账号吗？`, "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					});
					sessionStorage.clear();
					this.$router.push("/login");
					break;
				case "clear":
					let loadingInstance = Loading.service({
						fullscreen: true,
					});
					setTimeout(() => {
						loadingInstance.close();
						this.$message.success("清除缓存成功");
					}, 3000);
					break;
				case "profile":
					let res = await this.$http.get("user/profile");
					this.profile = res;
					this.profileDialogVisible = true;
					//this.$router.push('/profile')
					break;
			}
		},
	},
};
</script>

<style scoped="scoped">
.el-header {
	border-bottom: 1px solid #e0e8f8;
	color: #333;
	line-height: 64px;
	height: 64px !important;
	display: flex;
	flex-direction: row;
	align-content: space-between;
	justify-content: space-between;
	box-shadow: 5px 0px 8px #e0e8f8;
	z-index: 100;
}
.el-header .header-left {
	display: flex;
	flex-direction: row;
}
.el-header .header-left .logo {
	margin-left: 20px;
	height: 64px;
	line-height: 64px;
	padding-top: 8px;
}

.el-header .header-left .logo img {
	display: inline-block;
	width: 48px;
	height: 48px;
	line-height: 64px;
}

.el-header .header-left .title {
	line-height: 64px;
	font-size: 18px;
	font-weight: 700;
	margin-left: 20px;
}

.el-menu {
	border-right: none;
}
.el-menu-item {
	min-width: initial;
	width: 100%;
	padding: 0;
	text-overflow: ellipsis;
	overflow: hidden;
}

.el-aside {
	color: #333;
	overflow-x: hidden;
	border-right: #e0e8f8 1px solid;
	box-shadow: 0px 5px 15px #e0e8f8;
}

.main-area {
	padding-top: 30px;
	background-color: #ebeff8;
}
.el-dialog .item:last-child {
	border-bottom: none;
}
.el-dialog .item {
	font-size: 16px;
	line-height: 40px;
	border-bottom: #e8e8e8 1px solid;
	display: flex;
}
.el-dialog .item .title {
	width: 200px;
}
.el-dialog .item .value {
	width: 280px;
}
</style>
